<template>
	<view class="relative">
		<view class="top-box pl24 pr24 pt24">
			<view class="wbg mb-box">
				<view class="acc-text">
					账户保障中
				</view>
				<view class="fc-text">当前余额</view>
				<view class="price-text">
					￥{{userInfo.now_money}}
				</view>
				<view @click="$go('newbalance/index')" class="cz-bnt">充值</view>
			</view>
		</view>
		<view class="absolute log-box">
			<view class="pl24 pr24">
				<view v-if="list.length==0">
					<u-empty marginTop="60" mode="order" text="无数据"></u-empty>
				</view>
				<block v-else>
					<view class="pt30 bgfff bdra20 pl24 pr24">
						<view class="pb26">收支明细</view>
						<view v-for="(item,index) in list" :key="index">
							<view class="pt24 relative">
								<view class="dsf alc fz28 col333 pb24">
									<text>{{item.title}}</text>
								</view>
								<view class="dsf alc fz20 colaaa pb24">
									<text>{{item.created_at}}</text>
								</view>
								<view :class="item.price>0?'pr-text':'pr-texts'">
									-{{item.number}}
								</view>
							</view>
						</view>


					</view>

				</block>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				list: [],
				param: {
					limit: 10,
					page: 1
				},
				last_page: 0
			}
		},
		onLoad() {

		},
		onShow() {
			this.getList();
			this.getUserInfo();
		},
		onReachBottom() {
			this.param.page++;
			if (this.param.page > this.last_page) {
				return;
			}
			this.getList();
		},

		methods: {
			getUserInfo() {
				this.$api['post']('user/refresh-user').then(res => {
					if (res.code == 200) {
						this.userInfo = res.data;
					}
				});
			},
			getList() {
				this.$api['get']("common/bill-list?page=1", this.param).then(res => {
					if (res.code == 200) {
						if (this.param.page == 1) {
							this.last_page = res.data.last_page;
							this.list = res.data.data;
						} else {
							this.list.push(...res.data.data);

						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F6F6
	}

	.top-box {
		height: 516upx;
		width: 100%;
		background: linear-gradient(#0195FD 10%, #F6F6F6);
	}

	.mb-box {
		height: 360upx;
		background: #fff;
		border-radius: 16upx;
		overflow: hidden;

		.acc-text {
			color: #0195FD;
			background: #EDF7FB;
			padding: 16upx 24upx;
			font-size: 24upx;
		}

		.fc-text {
			text-align: center;
			margin-top: 40upx;
			font-size: 24upx;
			color: #333333;
		}

		.price-text {
			color: #191C26;
			font-size: 64upx;
			text-align: center;
			margin-top: 20upx;
		}

		.cz-bnt {
			color: #fff;
			background: #0195FD;
			text-align: center;
			border-radius: 16upx;
			width: 550upx;
			margin: 20upx auto;
			padding: 20upx 0;
			font-size: 32upx;
		}
	}

	.log-box {
		top: 420upx;
		width: 100%;
	}

	.pr-text,
	.pr-texts {
		color: #0195FD;
		font-size: 32upx;
		right: 10upx;
		position: absolute;
		top: 40upx;
	}

	.pr-texts {
		color: #FF0000;
	}
</style>